<template>
	<view>
		<!-- {{his}} -->
		<view class="his-date" v-for="(item,index) in his">
			<view class="his-mon">
				<view class="date">{{item.mon}} 月 {{item.date}} 日</view>
				<view class="line"></view>
			</view>
			<view class="hislist" v-for="(item,index) in item.storie" @tap="jumpTo(item.id)">
				<view class="his-lf">
					<view class="his-title">
						{{item.title}}
					</view>
					<view class="his-con">
						{{item.hint}}
					</view>
				</view>
				<view class="his-rh">
					<image style="width: 80px;height: 80px;" :src="item.images"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"myhit",
		props:{
			his:{
				type:Array,
			}
		},
		methods:{
			jumpTo(id){
				console.log(id,"id");
				uni.navigateTo({
					url:"../../pages/content/content?id="+id,
				})
			}
		}
	}
</script>

<style>
.his-mon{
	width: 100%;
	height: 30px;
	line-height: 30px;
	display: flex;
	align-items: center;
	/* background-color: #007AFF; */
}
.his-mon .date{
	width: 100px;
	text-align: center;
	color: #b3b3b3;
	font-weight: bold;
	/* background-color: #3F536E; */
}
.his-mon .line{
	flex-grow: 1;
	height: 1px;
	background-color: #b3b3b3;
}
.hislist{
	width: 100%;
	height: 110px;
}
.hislist::after{
	content: "";
	display: block;
	clear: both;
}
.hislist .his-lf{
	width: 260px;
	height: 80px;
	float: left;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
.his-lf .his-title{
	font-size: 18px;
	font-weight: bold;
}
.his-lf .his-con{
	padding-top:8px ;
	font-size: 15px;
	color: #808080;
}
.hislist .his-rh{
	float: left;
	width: 80px;
	height: 80px;
	margin-top: 18px;
}
</style>
